在用 Websocket 改寫更新機制後，我們便可以實作出 Streamlit Progress: st.progress 。

只要我們除了支援【新增 Component】類型訊息，再增加【修改 Component 】和【刪除 Component】類型的訊息。

type notifyPackUpdate struct {
	*notifyPackBase
	Component Component `json:"component"`
}

func NewNotifyPackUpdate(comp Component) *notifyPackUpdate {
	return &notifyPackUpdate{
		notifyPackBase: &notifyPackBase{
			Type: NotifyTypeUpdate,
		},
		Component: comp,
	}
}

這樣，就可以前端就可以根據對應的 Type ，去新增或修改 Component 。

case NOTIFY_TYPE_UPDATE: {
  this.setState((prevState) => {
    const newForest = prevState.forest.swallowCopy()
    newForest.updateNode(pack.component)
    return {
      forest: newForest,
    }
  })
  break
}

最後我們在 Component 上提供可以操作的介面就可以了：

type progressBarComponent struct {...}

func newProgressBarComponent(...) *progressBarComponent {...}

func (p *progressBarComponent) SetValue(value int) {
	p.Value = value
	p.SendNotifyPack(tgframe.NewNotifyPackUpdate(p))
}

func (p *progressBarComponent) SetLabel(label string) {
	p.Label = label
	p.SendNotifyPack(tgframe.NewNotifyPackUpdate(p))
}

func (p *progressBarComponent) Remove() {
	p.SendNotifyPack(tgframe.NewNotifyPackDelete(p.ID))
}